<template>
  <view class="mes-form-slots">
    <!-- 普通 -->
    <view
      v-if="!slots.type"
      class="text-over-1"
      :class="row[slots.field] == '0' || row[slots.field] ? '' : 'color-808080'"
    >
      {{
        row[slots.field] == '0'
          ? row[slots.field]
          : row[slots.field] || slots.placeholder || ''
      }}
    </view>

    <!-- 序列号输入选择框 -->
    <input
      v-if="slots.type === 'serial'"
      :type="slots.input_type"
      :placeholder="slots.is_detail ? '' : slots.placeholder || '请输入'"
      :disabled="
        slots.is_detail ||
        slots.disabled ||
        (row.serial_status && openSerial) ||
        false
      "
      v-model="row[slots.field]"
      @focus="inputFocus"
      @blur="inputBlur"
      @change="inputChange"
      @input="inputInput"
      @tap="tapInput"
    />
    <view v-if="slots.types === 'input'" class="inputBox1" @tap.stop>
      <input
        :type="slots.input_type"
        :placeholder="slots.is_detail ? '' : slots.placeholder || '请输入'"
        :disabled="slots.is_detail || slots.disabled || false"
        v-model="row[slots.field]"
        @focus="inputFocus"
        @blur="inputBlur"
        @change="inputChange"
        @input="inputInput"
      />
    </view>
    <!-- 批次选择框 -->
    <view
      v-if="slots.type === 'batch'"
      class="text-over-1 inputBox"
      :class="
        slots.types == 'input'
          ? 'color-808080'
          : row[slots.field] == '0' || row[slots.field]
          ? ''
          : 'color-808080'
      "
    >
      {{
        slots.types == 'input'
          ? '请选择'
          : row[slots.field] == '0'
          ? row[slots.field]
          : row[slots.field] || slots.placeholder || '请选择'
      }}
    </view>

    <!-- 输入框 -->
    <input
      v-if="slots.type === 'input'"
      :type="slots.input_type"
      :placeholder="slots.is_detail ? '' : slots.placeholder || '请输入'"
      :disabled="slots.is_detail || slots.disabled || false"
      v-model="row[slots.field]"
      @focus="inputFocus"
      @blur="inputBlur"
      @change="inputChange"
      @input="inputInput"
    />

    <!-- 选择器 -->
    <view
      v-if="slots.type === 'select'"
      class="text-over-1"
      :class="row[slots.field] == '0' || row[slots.field] ? '' : 'color-808080'"
    >
      {{
        row[slots.field] == '0'
          ? row[slots.field]
          : row[slots.field] || slots.placeholder || '请选择'
      }}
    </view>

    <!-- 日期 -->
    <view v-if="slots.type === 'date'" class="date">
      <uni-datetime-picker
        :border="false"
        :clear-icon="false"
        :type="slots.date_type || 'date'"
        :placeholder="slots.placeholder || ''"
        v-model="row[slots.field]"
        @change="inputChange"
      />
    </view>

    <!-- 弹窗 -->
    <mes-popup
      v-if="slots.type === 'select'"
      v-model="showMesPopup"
      :form="slots"
    ></mes-popup>
    <!-- 序列号选择 批次选择 -->
    <mesSerialBatch
      ref="mesSerialBatchRef"
      :row="row"
      :slots="slots"
      v-if="slots.type === 'serial' || slots.type === 'batch'"
    ></mesSerialBatch>
  </view>
</template>

<script>
export default {
  created() {
    console.log(this.openBatch, '批次')
  },
  props: {
    row: Object,
    slots: Object
  },
  data() {
    return {
      showMesPopup: false,
      openSerial: this.$store.state.openSerial,
      openBatch: this.$store.state.openBatch
    }
  },
  methods: {
    /**
     * 输入框
     */

    // 获取焦点
    inputFocus(e) {
      if (this.slots.focusEvent) {
        this.slots.focusEvent(e, this.slots, this.row)
      } else {
        console.warn('请在 slots 中配置 focusEvent')
      }
    },
    // 失去焦点
    inputBlur(e) {
      // 保留小数位数
      if (this.slots.digit_type) {
        this.row[this.slots.field] = this.$digit.digitBlur(
          e,
          this.slots.digit_type
        )
      }

      if (this.slots.blurEvent) {
        this.slots.blurEvent(e, this.slots, this.row)
      } else {
        console.warn('请在 slots 中配置 blurEvent')
      }
    },
    // 改变
    inputChange(e) {
      if (this.slots.changeEvent) {
        this.slots.changeEvent(e, this.slots, this.row)
      } else {
        console.warn('请在 slots 中配置 changeEvent')
      }
    },
    // 输入
    inputInput(e) {
      if (this.slots.inputEvent) {
        this.slots.inputEvent(e, this.slots, this.row)
      } else {
        console.warn('请在 slots 中配置 inputEvent')
      }
    },
    // 点击输入框
    tapInput() {
      if (this.row.serial_status && this.openSerial) {
        // 当序列号存在且获取焦点的时候显示选择序列号
        this.$refs.mesSerialBatchRef.open()
      }
    },

    /**
     * 选择器
     */

    // 选择器显示
    selectVisible() {
      if (this.slots.type !== 'select') return
      this.showMesPopup = true
      if (this.slots.showSelect) {
        this.slots.showSelect()
      }
      
    },
    // 批次选择器显示
    batchVisible() {
      if (this.slots.type === 'batch' && this.openBatch) {
        this.$refs.mesSerialBatchRef.open()
      }
    },

    /**
     * 日期
     */

    // 日期显示
    dateVisible() {
      console.log('dateVisible')
      if (this.slots.type !== 'date') return
    }
  }
}
</script>
<style scoped lang="less">
.inputBox {
  display: inline-block;
  width: 130rpx;
}
.inputBox1 {
  display: inline-block;
  line-height: 40rpx;
}
</style>
